Mastering HTML5 Forms by 2013

Author:2013
Language: eng
Format: epub, mobi
Publisher: Packt Publishing

Since our main focus is on styling, let us take a look at the CSS of the form. The following code is maintained in a separate file with a .css extension (external CSS file), which is linked to the main HTML page. Having a separate CSS file should be followed as it improves code readability as well as the maintenance of styling is made easier.

Also, new properties and font types are highlighted in bold:

/* General Form */ html{ margin: 0px; padding: 0px; background: #000000; } @font-face{ font-family: 'Conv_azoft-sans-bold-italic'; src: url('fonts/azoft-sans-bold-italic.eot'); src: url('fonts/azoft-sans-bold-italic.woff') format('woff'), url('fonts/azoft-sans-bold-italic.ttf') format('truetype'), url('fonts/azoft-sans-bold-italic.svg') format('svg'); font-weight: normal; font-style: normal; } body{ font-size:12px; height: 100%; width: 38%; padding: 20px; margin: 10px auto; font-family: Helvetica, Arial, sans-serif; color: #000000; background: rgba(212,228,239,1); background: -moz-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(212,228,239,1)), color-stop(100%, rgba(134,174,204,1))); background: -webkit-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); background: -o-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); background: -ms-linear-gradient(top, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); background: linear-gradient(to bottom, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%); } input[type="radio"]{ cursor:pointer; } #masteringhtml5_form .fieldset_border{ border-color:#ffffff; border-style: solid; } #masteringhtml5_form .txtinput{ font-family: Helvetica, Arial, sans-serif; border-style: solid; border-radius: 4px; border-width: 1px; border-color: #dedede; font-size: 18px; padding-left: 40px; width: 40%; color: #777; cursor:pointer; } #masteringhtml5_form .name{ background: #fff url('images/user.png') no-repeat; } #masteringhtml5_form label{ font-weight:bold; font-size:17px; } #masteringhtml5_form .legend{ font-size: 18px; font-family: 'Conv_azoft-sans-bold-italic',Helvetica, Arial, sans-serif; } #masteringhtml5_form .heading{ font-size: 24px; font-family: 'Conv_azoft-sans-bold-italic',Helvetica, Arial, sans-serif; } #masteringhtml5_form .txtinput.textbox{ width:89%; } #masteringhtml5_form .address_img{ background: #fff url('images/home.png') no-repeat; background-position-y: -5px; } #masteringhtml5_form .txtinput.select{ width:49%; color:#777777; } #masteringhtml5_form .div_outer_dob{ width:100%; } #masteringhtml5_form .dateinput{ width:79%; background: #fff url('images/date.png') no-repeat; background-position-x: 1px; background-size: 29px 29px; } #masteringhtml5_form .home_tel{ background: #fff url('images/tel.png') no-repeat; background-position-x: 1px; background-size: 29px 29px; } #masteringhtml5_form .work_tel{ background: #fff url('images/work.png') no-repeat; background-size: 27px 25px; } #masteringhtml5_form .email{ background: #fff url('images/email.png') no-repeat; } #masteringhtml5_form .div_dob{ width:50%; float:left; } #masteringhtml5_form .gender{ width:50%; float:left; } #masteringhtml5_form .gender span{ font-size:18px; } #masteringhtml5_form .div_outer_address{ clear:both; } .legend{ font-weight:bold; font-size:14px; } #masteringhtml5_form .submit{ text-align:center; } #masteringhtml5_form .submit_btn{ color:#ffffff; cursor:pointer; border-radius:5px; width: 17%; height: 100%; font-size: 21px; height:100%; box-shadow: 5px 5px 10px 5px #888888; background: rgb(149,149,149); background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); }

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.